<template>
  <el-form :disabled="disabled">
    <div v-if="LayoutJSON!=null" v-model="LayoutJSON" >
      <div v-if="editObject==2">
        <div class="formConfig" :span="24" v-for="(item,index) in LayoutJSON" :key="index" style="width: 98%">
          <el-form-item v-if="item.option[1].value=='1'&&item.label==''">
            <div class="item_box" @click="edit(index)">
<!--              <div style="display: flex;justify-content: space-between">-->
                <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">单行输入</span>
<!--              </div>-->
              <el-input :disabled='disabled' :placeholder="item.option[3].value" v-model="attributeJSON[item.option[0].value]"></el-input>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='2'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">下拉选择</span>
              <el-select style="width:100%" :disabled='disabled' :placeholder="item.option[3].value" v-model="attributeJSON[item.option[0].value]">
                <el-option v-for="item_ in item.option[3].options"
                           :key="item_.value"
                           :label="item_.label"
                           :value="item_.value"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='3'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">时间选择</span>
              <el-time-picker style="width:100%" :disabled='disabled' v-model="attributeJSON[item.option[0].value]"></el-time-picker>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='4'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">日期选择</span>
              <el-date-picker style="width:100%" :disabled='disabled' v-model="attributeJSON[item.option[0].value]"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='5'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">多行输入</span>
              <el-input style="width:100%" :disabled='disabled' type="textarea" :placeholder="item.option[3].value" v-model="attributeJSON[item.option[0].value]">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='6'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">数字输入</span>
              <el-input-number style="width:100%" :disabled='disabled' v-model="attributeJSON[item.option[0].value]"></el-input-number>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='7'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{item.option[0].value}}</span>
              <div
                style="width:100%"
                class="upload-demo"
                :disabled='true'>
                <i class="el-icon-upload" style="color:gray"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='8'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">单项选择</span>
              <el-radio-group v-model="attributeJSON[item.option[0].value]" style="width: 100%;" :disabled="disabled" >
                <el-radio v-for="_item in item.option[3].options" :label="_item.value" :key="_item.index">{{_item.name}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item v-else-if="item.option[1].value=='9'&&item.label==''">
            <div class="item_box" @click="edit(index)">
              <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                <span class="tipsLabel">多项选择</span>
              <el-checkbox-group v-model="attributeJSON[item.option[0].value]" style="height: 40px;width: 100%;" :disabled="disabled">
                <el-checkbox  v-for="_item in item.option[3].options" :label="_item.value" :key="_item.index">{{_item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </div>
      </div>
      <div v-else>
        <el-table :data="tableData"
                  ref="tableData"
                  border
                  stripe
                  v-loading="showTable"
                  :row-style="{ height: '10px' }"
                  style="font-size: 12px;width: 100%;margin-top:30px"
                  :header-cell-style="{ background: 'rgb(242, 246, 252)' }">
          <template v-for="(item,index) in LayoutJSON" >
            <el-table-column :prop="item.option[0].value" :label="item.option[0].value" :key="index"></el-table-column>
          </template>
          <el-table-column label="操作" fixed="right" width="160">
            <template slot-scope="scope" >
              <el-button  size="mini" @click="view(scope.row,scope.$index)">查看</el-button>
              <el-button type="primary" size="mini" @click="view(scope.row,scope.$index,'edit')">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else style="display: flex;justify-content: center;align-items: center;font-size: 14px">
      <el-empty :image-size="200"></el-empty>
    </div>
  </el-form>
</template>
<script>
import TaskManager from "../service/TaskManager";

export default {
  name: "formConfig3",
  props:["LayoutJSON","editObject"],
  data(){
    return{
      editObject:"",
      disabled:false,
      showTable:true,
      tableData:[],
      attributeJSON:{}
    }
  },
  methods:{
    edit(){

    },
    view(scope,index,str){
      if(str=='edit'){
        this.editObject=2;
        this.disabled=false;
        this.attributeJSON=this.tableData[index];
        this.$emit('view',this.editObject);
      }else{
        this.editObject=2;
        this.disabled=true;
        this.attributeJSON=this.tableData[index];
        this.$emit('view',this.editObject);
      }
    }
  },
  mounted() {
    // console.log(this.LayoutJSON,"layout")
    // TaskManager.getDynamicForm({status:1,name:})
  }
}
</script>

<style scoped>
  .tipsLabel{
    float:right;
    font-weight: bold;
    font-size: 12px;
    color: #539fff;
    border: 1px solid #539fff;
    border-radius: 6px;
    padding:2px 6px;
    line-height: 20px
  }
  .el-form-item{
    /*padding: 20px;*/
    /*border-radius: 4px;*/
    /*background-color: #FFF;*/
    /*box-shadow: rgba(0.1,0.1,0.1,0.06) 0px 2px 6px;*/
  }
  .flex{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  ._flex{
    text-align: left;
  }
  .el-form-item__label{
    text-align: left;
    padding-left: 20px;
    width: 90%;
    float: none;
    background-color: rgba(64, 158, 255, 0.1);
    color: rgb(64, 158, 255);
    font-weight: bold;
    border-radius: 4px;
    margin: 10px;
  }
 /deep/.formConfig .el-form-item__content{
    width: 100% !important;
  }
  .el-aside{
    height: 816px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
    border-radius:4px;
    padding:10px;
    border:#E4E7ED 1px solid
  }
  .aside_card{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
    border-radius:4px;
    padding:10px;
    border:#E4E7ED 1px solid
  }
  .title_label{
    font-size: 16px;
    font-weight:normal;
    color:#000;
    margin-bottom: 10px;
    padding:5px 10px;
    background-color: #f2f6fc;
  }
  .listItem{
    width: 100%;
    margin: 5px 0;
    border: 1px dashed #409EFF;
    background-color: #f2f6fc;
    padding:2px 10px ;
  }
  .listItem_right{
    width: 100%;
    margin: 5px 0;
    border-bottom: 1px solid #EBEEF5;
    /*background-color: #f2f6fc;*/
    padding: 10px ;
  }
  .item_box{
    width: 100%;
    /*margin: 0 10px;*/
    padding: 20px;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 2px;
  }
  .item_box_active{
    border-left-width: 10px;
    border-left: 10px solid #409EFF;
    background-color: #f2f6fc;
  }
  .item_box:visited{
    border-left: 10px solid #46ff40;
  }
  .el-input{
    width: 100% !important;
  }
  .el-input .el-input--suffix{
    width: 100% !important;
  }
  .el-input__inner{
    width: 100% !important;
  }
  .upload-demo{
    border:1px dashed gray;
    border-radius: 8px;
  }
  .title{
    font-size:20px;
    font-weight: bold;
    color: #409EFF;
  }
</style>
